<script setup lang='ts'>
  import { nextTick, reactive, ref } from 'vue';
  import { guild_roomApi } from '@/api/controller';
  import { ToastSuccess, Toastloading, allNumber } from '@/utils/public';
  import serachUserid from '@/components/serachUserid/index.vue';
  import xmUpload from '@/components/Upload/xm-upload.vue';
  const formLabelWidth = '120px'
  const dataForm = ref()
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    dialogFormVisible:false,
    disabled:false,
    updateForm:false,
    title:'',
    settleType:[] as Array<any>,
    aptitude:[] as Array<any>,
    roomTypeOptions:[] as Array<any>,
    formType:''
  })
  interface formQuert {
    user_id:number | string
    room_uid:number | string
    room_type:number
    room_id:number | string
    tally:number | string
    coefficient:number | string
    name:string
    image:string
    room_liang_type:number | string
    notice:string
    desc:string
    ifCertified:number
    ifUnion:number
    background_pic:string
  }
  let form = reactive({} as formQuert)
  const formRules = {
    user_id: [{ required: true, trigger: "blur", message: "请先选择用户" }],
    room_uid: [{ required: true, trigger: "blur", message: "请输入房间UID" }],
    room_type: [{ required: true, trigger: "blur", message: "请选择认证类型" }],
    name: [{ required: true, trigger: "blur", message: "请填写房间名称" }],
    image: [{ required: true, trigger: "blur", message: "请上传房间封面" }],
    room_liang_type: [{ required: true, trigger: "blur", message: "请选择是否显示靓号图标" }],
    notice:[{ required: true, trigger: "blur", message: "请输入房间公告" }],
    desc:[{ required: true, trigger: "blur", message: "请输入房间简介" }],
    ifCertified:[{ required: true, trigger: "blur", message: "请选择是否认证房间" }],
    ifUnion:[{ required: true, trigger: "blur", message: "请选择是否编入公会" }],
    background_pic:[{ required: true, trigger: "blur", message: "请上传房间壁纸" }],
  }
  const handleSubmit = (type='')=>{
    dataForm.value.validate(async(valid:any)=>{
      if(!valid && type=='') return
      const { room_id='' } = form
      const loading = Toastloading();
      let submitSet = false
      const { formType } = action
      if(formType == 'name') {
        await guild_roomApi.setRoomName(room_id, form).then(() => {
          ToastSuccess('修改成功')
          submitSet = true
        }).catch(() => {
          loading.close()
        });
      }
      if(formType == 'room_uid') {
        await guild_roomApi.updateCbdUid(form).then(()=>{
          ToastSuccess('修改成功')
          submitSet = true
        }).catch(() => {
          loading.close()
        });
      }
      if(formType == 'image') {
        const query = Object.assign({},form)
        if(type == 'skipImage') {
          query.image = ''
        }
        await guild_roomApi.setRoomImage(room_id,query).then(() => {
          ToastSuccess('修改成功')
          submitSet = true
        }).catch(() => {
          loading.close()
        });
      }
      if(formType == 'liang') {
        await guild_roomApi.liangTag(form).then(() => {
          ToastSuccess('设置成功')
          submitSet = true
        }).catch(() => {
          loading.close()
        });
      }
      if(formType == 'notice') {
        await guild_roomApi.setRoomNotice(room_id, form).then(() => {
          ToastSuccess('修改成功')
          submitSet = true
        }).catch(() => {
          loading.close()
        });
      }
      if(formType == 'desc') {
        await guild_roomApi.setRoomDesc(room_id, form).then(() => {
          ToastSuccess('修改成功')
          submitSet = true
        }).catch(() => {
          loading.close()
        });
      }
      if(formType == 'coefficient') {
        await guild_roomApi.setRoomCoefficient(room_id, form).then(() => {
          ToastSuccess('修改成功')
          submitSet = true
        }).catch(() => {
          loading.close()
        });
      }
      if(['unionAddRoom','background_pic'].indexOf(formType) > -1 || !formType) {
        if(!room_id) {
          await guild_roomApi.createCBDRoom(form).then(() => {
            ToastSuccess('新增成功')
            submitSet = true
          }).catch(() => {
            loading.close()
          });
        }
        if(room_id) {
          await guild_roomApi.updateCBDRoom(form).then(() => {
            ToastSuccess('修改成功')
            submitSet = true
          }).catch(() => {
            loading.close()
          });
        }
      }
      if(submitSet) {
        $emit('updateList')
        closeDialog()
        loading.close()
      }
    })
  }
  const openDialog = async(query:any = {})=> {
    const {
      room_id,
      room_uid,
      room_type,
      name='',
      roomTypeOptions=[],
      tally=0,
      room_recommend={},
      formType='',
      image='',
      room_liang_type=0,
      user_id=0,
      notice='',
      desc='',
      background_pic='',
      coefficient=0
    } = query
    if(roomTypeOptions.length == 0) {
      const res = await guild_roomApi.getRoomType({ type: 1 })
      const { data=[] } = res
      action.roomTypeOptions = data;
    }else if(roomTypeOptions.length > 0){
      action.roomTypeOptions = roomTypeOptions
    }
    action.formType = formType
    if(formType == 'unionAddRoom') {
      Object.assign(form,{
        user_id,
      })
      action.title = '创建CBD房间'
    }
    if(formType == 'room_uid') {
      Object.assign(form,{
        room_id,
        room_uid
      })
      action.title = `编辑${name}房间UID`
    }
    if(formType == 'name') {
      Object.assign(form,{
        room_id,
        name
      })
      action.title = `编辑${name}房间名称`
    }
    if(formType == 'image') {
      Object.assign(form,{
        room_id,
        image
      })
      action.title = `编辑${name}房间封面`
    }
    if(formType == 'liang') {
      Object.assign(form,{
        room_id,
        room_liang_type
      })
      action.title = `编辑${name}房间靓号图标`
    }
    if(formType == 'notice') {
      Object.assign(form,{
        room_id,
        notice
      })
      action.title = `编辑${name}房间公告`
    }
    if(formType == 'desc') {
      Object.assign(form,{
        room_id,
        desc
      })
      action.title = `编辑${name}房间简介`
    }
    if(formType == 'coefficient') {
      Object.assign(form,{
        room_id,
        room_uid,
        coefficient
      })
      action.title = `编辑${name}房间推荐系数`
    }
    if(['unionAddRoom','background_pic'].indexOf(formType) > -1 || !formType) {
      if(room_id) {
        const { coefficient=0 } = room_recommend || {}
        let obj = {
          room_id,
          room_uid,
          room_type:room_type.type_id,
          tally,
          coefficient
        } as any
        if(formType == 'background_pic') {
          obj['background_pic'] = background_pic
          action.title = `编辑${name}房间壁纸`
        }else {
          action.title = `编辑${name}房间`
        }
        Object.assign(form,obj)
      } else {
        Object.assign(form,{
          ifCertified:0,
          ifUnion:0
        })
        action.title = '创建CBD房间'
      }
    }
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    action.dialogFormVisible = false
    nextTick(() => {
      form = reactive({} as formQuert)
    });
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
    top="8vh"
    class="xm-dialog input-width"
    v-model="action.dialogFormVisible"
    :close-on-click-modal="action.disabled"
    :show-close="action.disabled"
    :close-on-press-escape="action.disabled"
    destroy-on-close
    width="60%"
    :title="action.title">
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <el-form-item
          v-if="action.formType == 'room_uid'"
          :label-width="formLabelWidth"
          prop="room_uid"
          label="房间UID">
          <el-input v-model="form.room_uid" @input="allNumber(form,'room_uid')" />
        </el-form-item>
        <el-form-item
          v-if="action.formType == 'name'"
          :label-width="formLabelWidth"
          prop="name"
          label="房间名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item
          v-if="action.formType == 'image'"
          :label-width="formLabelWidth"
          prop="image"
          label="房间封面">
            <xmUpload v-model:file-url="form.image"/>
        </el-form-item>
        <el-form-item
          v-if="action.formType == 'background_pic'"
          :label-width="formLabelWidth"
          prop="background_pic"
          label="房间壁纸">
            <xmUpload v-model:file-url="form.background_pic"/>
        </el-form-item>
        <el-form-item
          v-if="action.formType == 'notice'"
          :label-width="formLabelWidth"
          prop="notice"
          label="房间公告">
            <el-input
              v-model="form.notice"
              type="textarea" 
              :autosize="{ minRows: 6, maxRows: 6}" />
        </el-form-item>
        <el-form-item
          v-if="action.formType == 'desc'"
          :label-width="formLabelWidth"
          prop="desc"
          label="房间简介">
            <el-input
              v-model="form.desc"
              type="textarea" 
              :autosize="{ minRows: 6, maxRows: 6}" />
        </el-form-item>
        <el-form-item
          v-if="action.formType == 'liang'"
          :label-width="formLabelWidth"
          prop="room_liang_type"
          label="公会靓号"
        >
          <el-select v-model="form.room_liang_type" placeholder="请选择是否显示靓号图标">
            <el-option label="显示" :value="1" />
            <el-option label="隐藏" :value="0" />
          </el-select>
        </el-form-item>
        <template v-if="!action.formType || action.formType == 'unionAddRoom'">
          <template v-if="!form.room_id && action.formType != 'unionAddRoom'">
            <el-form-item :label-width="formLabelWidth" label="uuid">
              <serachUserid v-model:user_id="form.user_id" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" prop="用户ID" label="user_id">
              <el-input v-model="form.user_id" readonly />
            </el-form-item>
          </template>
          <el-form-item :label-width="formLabelWidth" prop="room_type" label="认证类型">
            <el-select v-model="form.room_type" placeholder="请选择认证类型">
              <el-option
                v-for="item in action.roomTypeOptions"
                :key="item.type_id"
                :label="item.type_name"
                :value="item.type_id" />
            </el-select>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="是否计数">
            <el-select v-model="form.tally" placeholder="请选择是否计数">
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
          <template v-if="!form.room_id">
            <el-form-item :label-width="formLabelWidth" label="房间认证" prop="ifCertified">
              <el-select v-model="form.ifCertified" placeholder="请选择是否认证房间">
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="编入公会" prop="ifUnion">
              <el-select v-model="form.ifUnion" placeholder="请选择是否编入公会">
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
          </template>
          <el-form-item :label-width="formLabelWidth" prop="coefficient" label="预置厅分数">
            <el-input v-model="form.coefficient" @input="allNumber(form,'coefficient')" />
          </el-form-item>
        </template>
        <el-form-item
          v-if="action.formType == 'coefficient'"
          :label-width="formLabelWidth"
          prop="coefficient"
          label="房间推荐系数">
          <el-input v-model="form.coefficient" @input="allNumber(form,'coefficient')" />
        </el-form-item>
      </el-form>
      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button
          v-if="action.formType == 'image'"
          @click="handleSubmit('skipImage')"
          type="danger">重置头像</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped >
  :deep(.xm-dialog) {
    .el-dialog__body {
      overflow: hidden auto;
      padding: 20px 20px;
    }
  }
</style>